<template>
  <div class="user" style="background:white;">
    <div class="search d-between">
      <div class="d-start">
        <div class="d-center" style="margin-right:10px;">
          <el-button
            size="medium"
            type="info"
            @click="search()"
            icon="el-icon-refresh"
            style="width:36px;height:36px;padding:0;"
          ></el-button>
          <el-button size="medium" type="primary" @click="add()">新增</el-button>
        </div>
        <div class="d-center" style="margin-right:10px;">
          <el-button size="medium" :type="selectData.length>0?'danger':'info'" @click="del()">删除</el-button>
        </div>
      </div>
      <div class="d-end" style="width:70%">
        <div class="input d-center">
          <el-input size="medium" v-model="searchs.account" placeholder="请输入用户名">
            <template slot="prepend">用户名称：</template>
          </el-input>
        </div>
        <div class="input d-center">
          <span class="select-gray d-center" style="width:100px;">角色组：</span>
          <el-select
            size="medium"
            filterable
            v-model="searchs.group_id"
            placeholder="请选择角色组"
            style="width:100%"
          >
            <el-option
              v-for="item in this.grouplist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="input d-center">
          <el-input size="medium" v-model="searchs.phone" placeholder="请输入手机号码">
            <template slot="prepend">手机号码：</template>
          </el-input>
        </div>
        <div class="d-center" style="margin-left:10px;">
          <el-button size="medium" type="info" plain @click="searchs.page = 1;search()">搜索</el-button>
          <!-- icon="el-icon-search"
          style="width:36px;height:36px;padding:0;"-->
          <el-button size="medium" type="info" @click="cancel()" plain>重置</el-button>
        </div>
      </div>
    </div>
    <div class="main">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;"
        height="100%"
        ref="table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="用户名" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="edit(scope.row)">{{scope.row.account}}</el-link>
          </template>
        </el-table-column>-->
        <el-table-column prop="account" label="用户名" align="center"></el-table-column>

        <el-table-column prop="group.name" label="角色组名称" align="center"></el-table-column>
        <el-table-column prop="organize.name" label="组织架构" align="center"></el-table-column>

        <el-table-column prop="nickname" label="姓名" align="center"></el-table-column>

        <el-table-column prop="phone" label="手机号码" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位名称" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" plain @click="edit(scope.row)">编辑</el-button>
            <el-button
              size="medium"
              type="warning"
              plain
              v-if="scope.row.ischeck == 2"
              @click="editPlan(scope.row)"
            >设置权限</el-button>
            <el-button
              size="medium"
              type="danger"
              @click="verify(scope.row)"
              v-if="scope.row.ischeck == 1"
              plain
            >审核用户</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="searchs.page"
        :page-size="paginate.limit"
        layout="prev, pager, next"
        :total="paginate.total"
        style="margin-top:10px;"
        class="d-center"
      ></el-pagination>
    </div>
    <el-dialog title="用户详情" :visible.sync="dialogFormVisible" @close="close" width="80%" top="10">
      <el-form :model="form">
        <el-form-item prop="group_id" label="角色组" :label-width="'100px'">
          <el-select
            size="medium"
            filterable
            v-model="form.group_id"
            placeholder="请选择角色组"
            style="width:100%"
          >
            <el-option
              v-for="item in this.grouplist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
            <!-- <el-opation :label="'该角色组已经关闭'" :value="item.id"></el-opation> -->
          </el-select>
        </el-form-item>
        <el-form-item prop="group_id" label="组织架构" :label-width="'100px'">
          <el-select
            v-model="mineStatus.name"
            ref="sel"
            placeholder="请选择"
            style="width:100%;height:auto"
          >
            <el-option :value="mineStatusValue"  class="trees">
              <el-tree
                :data="data"
                default-expand-all
                highlight-current
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
              ></el-tree>
            </el-option>
          </el-select>
          <!-- <el-select
            size="medium"
            v-model="form.organize_id"
            placeholder="请选择组织架构"
            style="width:100%"
          >
            <el-option
              v-for="item in this.organizelist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>-->
        </el-form-item>
        <el-form-item prop="account" label="用户名" :label-width="'100px'">
          <el-input
            placeholder="请输入用户名"
            size="medium"
            :disabled="form.id?true:false"
            v-model="form.account"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password" label="密码" :label-width="'100px'">
          <el-input placeholder="请输入密码 (不修改则留空)" v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item prop="nickname" label="真实姓名" :label-width="'100px'">
          <el-input placeholder="请输入真实姓名" size="medium" v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="联系电话" :label-width="'100px'">
          <el-input placeholder="请输入联系电话" size="medium" v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="unit" label="单位名称" :label-width="'100px'">
          <el-input placeholder="请输入单位名称" size="medium" v-model="form.unit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible=false">取 消</el-button>
        <el-button
          size="medium"
          type="primary"
          :disabled="buttonShow?true:false"
          @click="actions()"
        >保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="设置权限" :visible.sync="dialogFormVisible1" @close="close1" width="80%" top="10">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedlist" @change="handlecheckedlistChange">
        <el-checkbox v-for="item in projectlist" :label="item.id" :key="item.id">{{item.xmmc}}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible1=false">取 消</el-button>
        <el-button
          size="medium"
          type="primary"
          :disabled="buttonShow?true:false"
          @click="projectaction()"
        >保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      mineStatus: {},
      mineStatusValue: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      name: "",
      active: "",
      dialogFormVisible: false, //用户详情
      dialogFormVisible1: false, //设置权限
      popShow: "",
      selectData: [],
      tableData: [],
      grouplist: [], //角色组
      organizelist: [], //组织架构
      form: {},
      searchs: {
        group_id: "",
        phone: "",
        account: "",
        page: 1,
        limit: 10
      },
      loading: true,
      buttonShow: false,
      projectlist: [],
      checkAll: false, //全选
      isIndeterminate: true,
      checkedlist: [], //选择的ids
      projectform: {},
      paginate: {} //分页分数
    };
  },
  mounted: function() {
    this.getdata();
  },
  methods: {
    handleNodeClick(val) {
      this.mineStatusValue = val.name;
      this.mineStatus = val;
      this.$refs.sel.blur();
    },
    handleCurrentChange(val) {
      if (val != this.searchs.page) {
        this.searchs.page = val;
        this.getdata();
      }
    },
    handleCheckAllChange(val) {
      let ids = [];
      this.projectlist.forEach(item => {
        ids.push(item.id);
      });
      this.checkedlist = val ? ids : [];
      this.isIndeterminate = false;
    },
    handlecheckedlistChange(value) {
      // console.log(this.checkedlist);
      console.log(value);
    },
    setForm() {
      this.form = {
        group_id: "",
        organize_id: "",
        account: "",
        password: "",
        id: "",
        unit: "",
        phone: "",
        nickname: ""
      };
      this.mineStatus = [];
      this.mineStatusValue = "";
    },
    setProjectForm() {
      this.projectform = {
        project_ids: "",
        admin_id: 0
      };
    },
    getdata() {
      let that = this;
      that.loading = true;
      this.$get("/api/users/index", this.searchs).then(res => {
        if (res.code == 200) {
          that.paginate = { total: res.data.total, limit: res.data.limit };
          that.tableData = res.data.list;
          that.grouplist = res.data.auth;
          that.organizelist = res.data.organize;
          that.data = res.data.organizetree;
          that.projectlist = res.data.project;
          that.grouplist.unshift({ id: 0, name: "请选择角色组" });
          that.organizelist.unshift({ id: 0, name: "请选择组织架构" });
          that.search.page++;
        }

        setTimeout(function() {
          that.$refs.table.bodyWrapper.scrollTop = 0;
          that.loading = false;
        }, 300);
      });
    },
    close() {
      //   this.dialogFormVisible = false;
      this.grouplist.forEach((v, index) => {
        if (v.name == "该角色组已经关闭") {
          this.grouplist.splice(index, 1);
        }
      });
    },
    close1() {
      //   this.dialogFormVisible1 = false;
    },
    handleSelectionChange(value) {
      this.selectData = value;
    },
    edit(item) {
      this.dialogFormVisible = true;
      this.form = item;
      let have = this.grouplist.filter(v => {
        return v.id == this.form.group_id;
      });
      if (!have.length) {
        this.grouplist.unshift({
          id: this.form.group_id,
          name: "该角色组已经关闭"
        });
      }
      this.$forceUpdate();
      console.log(item)
      this.organizelist.forEach(v => {
        if (v.id == item["organize_id"]) {
          this.mineStatusValue = v.name;
          this.mineStatus = v;
        }
      });
    },
    editPlan(item) {
      this.checkedlist = [];
      this.dialogFormVisible1 = true;
      this.projectform.admin_id = item.id;
      if (item.project_ids) {
        item.project_ids.split(",").forEach(item => {
          if (item) {
            this.checkedlist.push(parseInt(item));
          }
        });
      }
    },
    add() {
      this.setForm();
      this.dialogFormVisible = true;
    },
    del() {
      let num = this.selectData.length;
      if (num <= 0) {
        this.$message.error("没有选中要删除的条目");
        return false;
      }
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.selectData.forEach((item, index) => {
            this.$post("/api/users/deletes", {
              id: item.id
            }).then(res => {
              if (index + 1 == num) {
                this.getdata();
                this.$message({
                  title: "操作提示",
                  message: res.msg,
                  type: res.state
                });
              }
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    actions() {
      let that = this;
      let button = "添加用户操作";
      this.buttonShow = true;
      if (this.form.id) {
        button = "编辑用户操作";
      }
      this.form.organize_id = this.mineStatus.id;
      this.$post("/api/users/actions", this.form).then(res => {
        this.$message({
          title: button,
          message: res.msg,
          type: res.state
        });
        if (res.code == 200) {
          this.getdata();
          that.dialogFormVisible = false;
        }
        setTimeout(function() {
          that.buttonShow = false;
        }, 300);
      });
    },
    projectaction() {
      // console.log(this.projectform);

      if (!this.projectform.admin_id) return false;
      this.dialogFormVisible1 = false;
      this.projectform.project_ids = this.checkedlist;
      let that = this;
      this.$post("/api/users/project", this.projectform).then(res => {
        this.$message({
          title: "设置权限",
          message: res.msg,
          type: res.state
        });
        if (res.code == 200) {
          this.getdata();
          that.dialogFormVisible1 = false;
        }
        setTimeout(function() {
          that.buttonShow = false;
        }, 300);
      });
    },
    search() {
      this.searchs.page = 1;
      this.getdata();
    },
    cancel() {
      this.searchs = {
        group_id: "",
        phone: "",
        account: "",
        page: 1
      };
      this.getdata();
    },
    verify(item) {
      this.$confirm("是否审核通过该成员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$post("/api/users/usersCheck", {
            admin_id: item.id,
            ischeck: 2
          }).then(res => {
            if (res.code == 200) this.getdata();
            this.$message({
              title: "操作提示",
              message: res.msg,
              type: res.state
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审核"
          });
        });
    }
  }
};
</script>

<style lang="less">
.trees {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background: none;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    border: 0;
  }
  .el-tree-node__content {
    height: 40px;
    border-bottom: 1px solid #eef4f5;
  }
  height: auto;
  padding: 0;
}
</style>
<style lang="less" scoped>
.user {
  width: 100%;
  height: calc(100% - 50px);
  border-radius: 5px;
  .search {
    width: 100%;
    height: 60px;
    padding: 10px 5px;
    position: relative;
    .input {
      width: 300px;
      margin-left: 10px;
      span {
        flex-shrink: 0;
      }
    }
  }
  .main {
    //   width: 100%;
    height: calc(100% - 60px);
    // overflow-y: scroll;
    // position: absolute
    border: 1px solid #ebeef5;
  }
}
</style>